<template>
	<view class="root-wrap my">
		<image class="bg" src="../../static/assets/imgs/my-bg.png" mode="widthFix"></image>
		<view class="content">
			<view class="com-info">
				<view class="avatar"><image :src="isLogin?userInfo.logo_image_url:'../../static/assets/imgs/my-avatar.png'"></image></view>
				<view class="info">
					<view class="name" @click="onLogin">{{isLogin?userInfo.vendor_name:'点击登录'}}</view>
					<view class="status">{{isLogin?userInfo.status_text:'未审核'}}</view>
					<view class="edit" @click="goEdit">编辑公司信息</view>
				</view>
			</view>
			<view class="data-wrap">
				<view class="item" @click="goJoin">
					<text class="num">{{isLogin?dataInfo.join_total:'-'}}</text>
					<text class="desc">参与数</text>
				</view>
				<view class="line"></view>
				<view class="item" @click="goCheckIn">
					<text class="num">{{isLogin?dataInfo.win_total:'-'}}</text>
					<text class="desc">中选数</text>
				</view>
				<view class="line"></view>
				<view class="item">
					<text class="num">{{isLogin?dataInfo.user_info.scores:'-'}}</text>
					<text class="desc">甲方评分</text>
				</view>
			</view>
			<view class="list-wrap invite-wrap">
				<view class="wrap-title">邀请报价</view>
				<view v-if="dataInfo.invite_data&&dataInfo.invite_data.length>0">
					<view v-for="item,index in dataInfo.invite_data" :key="index" class="invite-item" @click="goProgramDetail(item.bid_id)">
						<view class="info-wrap">
							<view class="item-title">{{item.bid_name}}</view>
							<view class="time">截至时间： {{formatTime(item.endtime)}}</view>
						</view>
						<u-icon name="arrow-right" color="#C0C4CC" size="32rpx"></u-icon>
					</view>
				</view>
				<view v-else class="empty"><image src="../../static/assets/imgs/empty-data.png" mode="aspectFill"></image></view>
			</view>
			<view class="list-wrap near-wrap">
				<view class="wrap-title">近期报价</view>
				<view v-if="nearList.length>0" class="near-list">
					<view v-for="(item, index) in nearList" :key="index" class="near-item">
							<view class="title-wrap">
								<view class="item-title">{{item.bid.bid_name}}</view>
								<view v-if="item.bid_status=='报价期'" class="status status-0">{{item.bid_status}}</view>
								<view v-if="item.bid_status=='评选期'" class="status status-1">{{item.bid_status}}</view>
								<view v-if="item.bid_status=='中选'" class="status status-2">{{item.bid_status}}</view>
								<view v-if="item.bid_status=='落选'" class="status status-3">{{item.bid_status}}</view>
							</view>
							<view class="steps-text">
								<text>报价期</text>
								<text>评选期</text>
								<text>出结果</text>
							</view>
							<view class="steps">
								<u-steps :current="getCurrentStep(item.bid_status)" activeColor="#30D6C2" inactiveColor="#D9D9D9" dot>
									<u-steps-item title=" "></u-steps-item>
									<u-steps-item title=" "></u-steps-item>
									<u-steps-item title=" "></u-steps-item>
								</u-steps>
							</view>
							<view class="oper">
								<view class="nav" @click="goProgramDetail(item.bid_id)">查看详情</view>
								<view v-if="item.bid_status=='报价期'" class="nav" @click="goQuotation(item.bid_id)">修改报价</view>
								<view class="nav" @click="onCall(item.bid.tel)">咨询项目</view>
							</view>
						</view>
					
				</view>
				<view v-else class="empty"><image src="../../static/assets/imgs/empty-data.png" mode="aspectFill"></image></view>
			</view>
			<view v-if="isLogin" class="logout" @click="onLogout">退出登录</view>
		</view>
		<my-tabbar :act="1"></my-tabbar>
	</view>
</template>

<script>
	import {getUserInfo,getMyData,logout,userLoginApi} from '@/api/user.js';
	import {getNearJoinList} from '@/api/program.js';
	import myTabbar from '@/components/myTabbar.vue';
	export default {
		components: {
			myTabbar
		},
		data() {
			return {
				userInfo: {},
				dataInfo: {},
				isLogin: false,
				nearList: [],
			};
		},
		onShow(){
			this.isLogin = this.vuex_has_login;
			this.userInfo = this.vuex_user;
			if(this.isLogin){
				this.getUserInfo();
				this.getDataInfo();
				this.getNearJoinList();
			}
		},
		methods:{
			onLogin(){
				if(this.isLogin) return;
				uni.showLoading({
					title:'登录中...',
				})
				uni.login({
					provider: 'weixin',
					success: (res) => {
						this.code = res.code //  把code进行暂存
						userLoginApi({
							code: res.code
						}).then(res => {
							if(res.code==2){
								uni.hideLoading();
								// 未注册用户
								uni.navigateTo({
									url:'/pages/my/sign/index'
								})
							}else if(res.code==1){
								uni.hideLoading();
								// 已注册用户
								this.isLogin = true;
								this.vuex_login(res);
								this.getUserInfo();
								this.getDataInfo();
								this.getNearJoinList();
							}
						})
					},
					fail: (err) => {
						console.log(err);
						uni.hideLoading();
					},
				})
			},
			getCurrentStep(status){
				let index = -1;
				if(status=='报价期'){
					index = 0;
				}else if(status == '评选期'){
					index = 2;
				}else if(status == '中选'||status == '落选'){
					index = 3;
				}
				return index;
			},
			formatTime(timestamp){
				// 转换时间戳为日期对象
				let date = new Date(timestamp*1000);
				
				// 格式化日期
				return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
			},
			getUserInfo(){
				getUserInfo().then((res)=>{
					if (1 == res.code) {
						this.userInfo = res.data;
						this.$u.vuex('vuex_user', res.data)
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			getDataInfo(){
				getMyData().then((res)=>{
					if (1 == res.code) {
						this.dataInfo = res.data;
					} else {
						// uni.showToast({
						// 	title:res.msg,
						// 	icon:'none'
						// })
						console.log(res.msg);
					}
				})
			},
			getNearJoinList(){
				let that = this;
				getNearJoinList().then((res)=>{
					if (1 == res.code) {
						that.nearList = res.data;
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			goEdit(){
				if(!this.isLogin||!this.userInfo){
					uni.showToast({
						title: '当前未登录，请注册登录',
						icon: 'none'
					})
				}else{
					uni.navigateTo({
						url: '/pages/my/edit'
					})
				}
			},
			goJoin(){
				if(!this.isLogin||!this.userInfo){
					uni.showToast({
						title: '当前未登录，请注册登录',
						icon: 'none'
					})
				}else{
					uni.navigateTo({
						url: '/pages/my/join'
					})
				}
			},
			goCheckIn(){
				if(!this.isLogin||!this.userInfo){
					uni.showToast({
						title: '当前未登录，请注册登录',
						icon: 'none'
					})
				}else{
					uni.navigateTo({
						url: '/pages/my/checkin'
					})
				}
			},
			goProgramDetail(id){
				uni.navigateTo({
					url: '/pages/program/detail?id='+id
				})
			},
			goQuotation(id){
				uni.navigateTo({
					url:'/pages/program/quotation?edit=true&id='+id
				})
			},
			onCall(tel){
				uni.makePhoneCall({
				  phoneNumber: tel // 拨打的电话号码
				});
			},
			onLogout(){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '您确定要退出登录吗?',
					success:(res)=>{
						if(res.confirm){
							logout().then((result)=>{
								that.vuex_logout();
								that.isLogin = false;
								that.userInfo = {};
								that.dataInfo = {};
								that.nearList = [];
								uni.showToast({
									title:'已退出',
									icon:'none'
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.root-wrap{
	position: relative;
	width: 100%;
	.bg{
		position: absolute;
		top: -130rpx;
		left: 0;
		z-index: 0;
		width: 100%;
	}
	.content{
		position: relative;
		width: 702rpx;
		margin: 0 24rpx;
		padding-bottom: 300rpx;
		z-index: 1;
		overflow: hidden;
		.com-info{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 116rpx;
			padding-left: 52rpx;
			.avatar{
				box-sizing: border-box;
				width: 178rpx;
				min-width: 178rpx;
				height: 178rpx;
				font-size: 0;
				margin-right: 16rpx;
				border: 10rpx solid #fff;
				background-color: #fff;
				border-radius: 50%;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.info{
				flex: 1;
				.name{
					font-weight: 500;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 56rpx;
				}
				.status{
					width: 124rpx;
					height: 50rpx;
					font-size: 28rpx;
					color: #F3F4F6;
					text-align: center;
					line-height: 50rpx;
					margin: 14rpx 0;
					background-color: #478CDE;
					border-radius: 48rpx;
				}
				.edit{
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
		.data-wrap{
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			width: 702rpx;
			height: 216rpx;
			margin-top: 76rpx;
			background-color: #F3F4F6;
			box-shadow: 0rpx 8rpx 4rpx 0rpx rgba(177,177,177,0.25);
			border-radius: 8rpx;
			.item{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.num{
					font-weight: 500;
					font-size: 44rpx;
					color: #303133;
				}
				.desc{
					font-weight: 400;
					font-size: 32rpx;
					color: #606266;
					line-height: 38rpx;
					margin-top: 30rpx;
				}
			}
			.line{
				width: 2rpx;
				height: 84rpx;
				background-color: #EAEAEA;
			}
		}
		.list-wrap{
			box-sizing: border-box;
			width: 100%;
			padding: 0 24rpx 24rpx;
			background: #F3F4F6;
			margin-top: 48rpx;
			border-radius: 8rpx;
			.wrap-title{
				font-weight: 500;
				font-size: 32rpx;
				color: #303133;
				padding: 24rpx 0;
				margin-bottom: 34rpx;
				border-bottom: 2rpx solid #DFDFE0;
			}
			.item-title{
				position: relative;
				font-weight: 500;
				font-size: 32rpx;
				color: #303133;
				line-height: 56rpx;
				padding-left: 12rpx;
			}
			.item-title::after{
				content: '';
				position: absolute;
				left: 0;
				top: 14rpx;
				width: 4rpx;
				height: 32rpx;
				background-color: #30D6C2;
			}
			.empty{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 16rpx 0 64rpx;
				image{
					width: 242rpx;
					height: 242rpx;
				}
			}
		}
		.invite-wrap{
			.invite-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 52rpx;
				.info-wrap{
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					.time{
						font-weight: 400;
						font-size: 28rpx;
						color: #606266;
						line-height: 50rpx;
						margin-top: 8rpx;
					}
				}
			}
			.invite-item:last-of-type{
				margin-bottom: 0;
			}
		}
		.near-wrap{
			.u-list{
				height: auto !important;
			}
			.near-item{
				margin-bottom: 36rpx !important;
			}
			.title-wrap{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.item-title{
					flex: 1;
					margin-right: 10rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.status{
					width: 100rpx;
					height: 44rpx;
					font-size: 24rpx;
					color: #F3F4F6;
					text-align: center;
					line-height: 44rpx;
					background-color: #30D6C2;
					border-radius: 22rpx;
				}
				.status-1{
					background-color: #1FA293;
				}
				.status-2{
					background-color: #D1268D;
				}
				.status-3{
					background-color: #616363;
				}
			}
			.near-item:last-of-type{
				margin-bottom: 0;
			}
			.steps-text{
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #606266;
				line-height: 50rpx;
				margin-top: 42rpx;
				padding: 0 38rpx;
			}
			.steps{
				position: relative;
				left: -60rpx;
				width: 775rpx;
				margin: 22rpx 0 42rpx;
				.u-steps-item__wrapper{
					background-color: transparent !important;
				}
			}
			.oper{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.nav{
					font-weight: 400;
					font-size: 28rpx;
					color: #606266;
					margin-left: 162rpx;
				}
				.nav:first-of-type{
					margin-left: 0;
				}
			}
		}
		.logout{
			font-weight: 400;
			font-size: 28rpx;
			color: #909399;
			margin: 56rpx auto 0;
			text-align: center;
		}
	}
}
</style>
